<template>
	<jiess :setup="setup" />
</template>

<script setup>
	import { ElAside, ElContainer, ElScrollbar, ElMain, ElHeader } from 'element-plus';
	import BaseLayout from './components/BaseLayout';
	import BaseRouter from './components/BaseRouter';
	import BaseMenu from './components/Menu.vue';
	import BaseTabs from './components/Tabs.vue';
	import BaseNav from './components/Nav.vue';
	import { useStore } from '@/store';
	import { watchEffect } from 'vue';
	const store = useStore();

	function setup() {
		const width = $ref('200px');
		watchEffect(() => {
			width.value = store.isCollapse ? 'auto' : '200px'
		});
		this.add({
			is: BaseLayout,
			class: '_basic-layout',
			children: [{
					is: ElAside,
					class: 'bg-menu-100',
					width: { $proxy: width },
					children: {
						is: ElScrollbar,
						children: { is: BaseMenu }
					}
				},
				{
					is: ElContainer,
					class: 'container-inner',
					children: [{
							is: ElHeader,
							height: '100px',
							children: [{ is: BaseNav }, { is: BaseTabs }],
							style: { overflow: 'hidden', backgroundColor: 'white', zIndex: 9 }
						},
						{ is: ElMain, children: { is: BaseRouter } }
					]
				}
			]
		});
	}
</script>

<style lang="scss" scoped>
	._basic-layout {
		.el-header {
			padding: 0;
			box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
		}

		.el-aside {
			height: 100%;
			box-shadow: 0px 0px 8px 0px #2c3e50;
		}

		.el-scrollbar__view {
			height: 100%;
		}

		.el-main {
			position: relative;
			box-sizing: border-box;
			overflow-x: hidden;
		}

		.el-main::after {
			content: '';
			opacity: 0.05;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			position: absolute;
			z-index: -1;
		}
	}
</style>